import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
///同步加载组件
// import Login from '@view/Login.vue'
// import Manage from '@view/Manage.vue'
// import QuestionList from '@view/questions/List.vue'
// import QuestionAdd from '@view/questions/Add.vue'
// let re=import('@view/Login');
// console.log("import()===>",re);
const router = createRouter({
    //路由配置
    //设置路由地址模式: history  /path 不配置服务器的时候怕刷新 hash #/path 不怕刷新
    history: createWebHashHistory(),
    //路由映射配置  /path ===> component 路由地址栏地址和路由path匹配的时候 显示对应的组件
    routes: [
        {
            name:"Index",
            path: "/",
            redirect:'/manage',//重定向
            meta:{//路由元信息. 可以在定义路由的时候 往路由里面传值.
                title:"首页"
            },
            children: [
                //路由嵌套
                {
                    // name:"Manage",
                    props:true, //当有动态路由传值 或 params传值 会自动把params数据 放入组件的props
                    path: "manage",//path: "/manage",
                    meta:{
                        title:"后台管理"
                    },
                    component: () => import("@view/Manage.vue"),//这个匹配的组件会渲染到router-view
                    children: [//嵌套子路由,嵌套的子路由的路由出口在上级路由组件里面需要写一个router-view出口
                        {
                            path:"", //当进入 #/manage 路由的时候 子路由默认渲染Home组件
                            component:()=>import("@view/Home.vue")
                        },
                        // {
                        //     path: "question", // 不能是/question 在路由里面 最前 “/” 的标识根目录
                        //     meta:{
                        //         title:"面试题列表"
                        //     },
                        //     component: () => import("@view/questions/List.vue")
                        // },
                        {
                            //  :page(正则用来限定:page的)*后面这个正则用来限定前面整个:page
                            //类似 (:page(\\d*))*
                            path: "question/:page(\\d*)*", //动态路由 动态路由可以写正则
                            meta:{
                                title:"面试题列表"
                            },
                            component: () => import("@view/questions/List.vue"),
                            beforeEnter(to,from,next){
                                console.log("独享路由守卫 beforeEnter  ===>");
                                next();
                            }
                        },
                        {
                            path: "question_add",
                            meta:{
                                title:"添加面试"
                            },
                            component: () => import("@view/questions/Add.vue")
                        },
                        {
                            path: "answer",
                            component: () => import("@view/answer/List.vue")
                        },
                        {
                            path: "answer_add",
                            component: () => import("@view/answer/Add.vue")
                        },
                        {
                            path: "category",
                            component: () => import("@view/category/List.vue")
                        },
                        {
                            path: "category_add",
                            component: () => import("@view/category/Add.vue")
                        },
                        {
                            path: "user",
                            component: () => import("@view/user/List.vue")
                        },
                        {
                            path: "user_add",component: () => import("@view/user/Add.vue")
                        }
                    ]
                },
            ]
        },
        {
            name: "Login",//具名路由 可以根据名称跳转
            path: '/login',
            //用()=>import("@view/Login.vue")异步懒加载路由组件.
            //路由懒加载的组件 会打包工具打包成一个独立js文件。在需要显示的时候会异步加载组件js.提高首次运行速度.
            // component: () => import("@view/Login.vue") //vue路由里面路由组件懒加载
            components:{//显示多个组件 命名路由视图组件
                default:()=>import("@view/Login.vue"),
                register:()=>import("@view/Reg.vue")
                // <router-view name="default"></router-view>
                // <router-view name="register"></router-view>
            }
        },
        {
            path:"/:nomatch(.*)*",
            component:()=>import("@view/404.vue")
        }
    ],
    // linkActiveClass:"",
    // linkExactActiveClass:""
});
router.beforeEach((to,from,next)=>{
    console.log("全局路由守卫函数 beforeEach()===>");
    next();
});
router.beforeResolve((to,from,next)=>{
    console.log("全局路由守卫函数==beforeResolve=>");
    next();
});
router.afterEach((to,from)=>{//上一次路由离开
    console.log("全局路由守卫afterEach");
})

//公开router对象 router需要作为插件安装到Vue的根对象
export default router;